<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Promise与Fetch简单示例</title>
    <style>
        .status {
  padding: 10px;
  border-radius: 4px;
  margin: 10px 0;
}

.success {
  background-color: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}
    </style>
</head>
<body>
    <!-- <form action="http://172.18.214.70:8080/login" method="get">
        <input type="text" name="username" placeholder="用户名">
        <input type="password" name="password" placeholder="密码">
        <button type="button">表单</button>
    </form> -->

    <div>
        <h1>Promise 与 Fetch 示例</h1>
        <p>点击按钮,使用Fetch获取一个虚拟的用户数据。</p>
        <button onclick="fetchUserData()">获取用户数据</button>
        <button onclick="clearOutput()">清空输出</button>
          <div id="statusArea"></div>
        <div id="output">输出将显示在这里...</div>
    </div>
</body>
</html>